<template>
    <div>
         <h4>组件篇-非父子通信</h4>
        <inject></inject>
        <button @click="change">change</button>
    </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import inject from './inject.vue';

let name = ref('zhangsan')
let age = ref(20)
// 通过 provide 注入数据 实现非父子组件通信
provide('name', name)
provide('age', age)

function change() {
    name.value = 'lisi'
    age.value = 25
}

</script>

<style lang="scss" scoped></style>